<template>
    <div>
        <vheader :ismini="iscollapse"></vheader>
        <el-container class="content_main" style="border:0px solid #e3e3;">
            <el-main >
                <el-row>
                     <el-col :span="20" :xs="20" :sm="20" :md="20" :lg="20" :xl="20" :push="2" :pull="2">
                        <el-steps :active="1" simple >
                            <el-step title="新增主题" icon="el-icon-edit"></el-step>
                            <el-step title="新增产品" icon="el-icon-picture"></el-step>
                            <el-step title="新增（关联）属性" icon="el-icon-upload"></el-step>
                        </el-steps>
                    </el-col>
                     <!-- <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="pageleft" >
                        <div class="grid-content bg-purple">
                            <h3>点击主题复制</h3>
                             <el-alert title="带辅助性文字介绍" type="success" style="margin-bottom:10px;"
                                description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
                            </el-alert>
                             <el-alert title="带辅助性文字介绍" type="success" style="margin-bottom:10px;"
                                description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
                            </el-alert>
                        </div>
                    </el-col> -->
                     <el-col :span="16" :xs="16" :sm="16" :md="16" :lg="16" :xl="16" :push="4" :pull="4" class="pageleft">
                        <el-row :gutter="20" style="border:0px solid red;">
                            <el-col :span="24" >
                                <h3>新增产品</h3>
                                <el-card style="margin-top:20px;text-align: right;">
                                    <span>这里得说点什么</span>
                                    <el-button type="success" @click="onSubmit" size="mini">提交</el-button>
                                </el-card>
                                <el-card v-for="(item,index) in form.addlist"  style="margin-top:10px;">
                                    <el-form ref="form" :inline="true" label-width="60px" size="mini">
                                        <el-form-item label="名称">
                                            <el-input v-model="item.FullName"></el-input>
                                        </el-form-item>
                                        <el-form-item label="简称">
                                            <el-input v-model="item.ShortName"  ></el-input>
                                        </el-form-item>
                                        
                                        <el-form-item label="标签">
                                            <el-checkbox-group v-model="item.tags">
                                            <el-checkbox :label="tag" :key="tag" v-for="tag in baseDate.Taglist" name="type"></el-checkbox>
                                            </el-checkbox-group>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button type="success" size="mini"  :index="index" @click="onSubmit($event)" icon="el-icon-success" circle></el-button>
                                            <el-button type="primary" size="mini"  :index="index" @click="onAddRow($event)" icon="el-icon-edit" circle></el-button>
                                            <el-button type="danger" size="mini"  :index="index" @click="onDeleteRow($event,1)" icon="el-icon-delete" circle></el-button>
                                        </el-form-item>
                                        <el-form-item label="说明">
                                            <el-input type="textarea" v-model="item.Content" rows="4" style="width:750px;height:50px;"></el-input>
                                        </el-form-item>
                                    </el-form>
                                </el-card>
                                <el-card v-for="(item,index) in form.editlist"  style="margin-top:10px;">
                                    <el-form ref="form" :inline="true" label-width="60px" size="mini">
                                        <el-form-item label="名称">
                                            <el-input v-model="item.FullName"></el-input>
                                        </el-form-item>
                                        <el-form-item label="简称">
                                            <el-input v-model="item.ShortName"  ></el-input>
                                        </el-form-item>
                                        
                                        <el-form-item label="标签">
                                            <el-checkbox-group v-model="item.tags">
                                            <el-checkbox :label="tag" :key="tag" v-for="tag in baseDate.Taglist" name="type"></el-checkbox>
                                            </el-checkbox-group>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button type="success" size="mini"  :index="index" @click="onSubmit($event)" icon="el-icon-success" circle></el-button>
                                            <el-button type="primary" size="mini"  :index="index" @click="onAddRow($event)" icon="el-icon-edit" circle></el-button>
                                            <el-button type="danger" size="mini"  :index="index" @click="onDeleteRow($event,2)" icon="el-icon-delete" circle></el-button>
                                        </el-form-item>
                                        <el-form-item label="说明">
                                            <el-input type="textarea" v-model="item.Content" rows="4" style="width:750px;height:50px;"></el-input>
                                        </el-form-item>
                                    </el-form>
                                </el-card>
                            </el-col>
                            
                        </el-row>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import vheader from '../common/Header';
    import vfooter from '../common/Footer';
    import { SubjectType, Tag, page, page_rule } from '../../data/base_data';
    import { baseUrl, routerMode, baseImgPath} from '../../config/env';

    export default {
        data() {
            return {
                iscollapse:false,
                isshowfooter:false,
                key: "",
                subjectlist:[],
                baseDate:{
                    SubjectTypelist:[],Taglist:[],curpage:{}
                },
                form: {
                    SubjectID:0,
                    editlist:[],
                    addlist:[]
                }
            }
        },
        watch:{
            "form.SubjectType":function(b, a){
                this.$nextTick(function(){
                    //加载对应主题得属性
                    alert(b+":"+a);
                });
            },
            '$route':'fetchData'
        },
        methods:{
            fetchData:function(){
                this.form.SubjectID = this.$route.params.sid;
                this.loadSubjectProject();
            },
            loadSubjectProject : function(){
                var rule =  {
                    Field: "SubjectID",
                    Value: this.form.SubjectID,
                    Operate: 3
                }
                this.baseDate.curpage.FilterGroup.Rules = [rule];
                //post数据
                this.$http.post(baseUrl + "api/Admin/ContrastProduct/Read",this.baseDate.curpage).then(function(res){
                     if(res.body.Rows.length>0){
                        for (let index = 0; index < res.body.Rows.length; index++) {
                            const element = res.body.Rows[index];
                            element.tags = element.Tag.split(",");;
                            this.form.editlist.push(element);
                        }
                        // this.form.editlist = res.body.Rows;
                     }
                     else this.onAddRow();
                },function(res){
                    alert("操作数据获取失败");
                });
            },
            onSubmit:function(){
                //post数据
                var that = this;
                this.form.addlist.forEach(el=>{
                    el.Tag = el.tags ? el.tags.join(","):"";
                    el.SubjectID = that.form.SubjectID;
                    el.Id = 0;  
                    delete el["tags"];
                });
                this.form.editlist.forEach(el=>{
                    el.Tag = el.tags ? el.tags.join(","):"";
                    el.SubjectID = that.form.SubjectID;
                    delete el["tags"];
                });
                var pushlist = this.form.addlist.concat(this.form.editlist);
                this.$http.post(baseUrl + "api/Admin/ContrastProduct/CreateAndUpdate",
                    pushlist
                ).then(function(res){
                    if(res.body.Type==200|| res.body.Type==203 ){
                        this.$message({
                            message: res.body.Content,
                            type: 'success'
                        });
                        var sid = this.form.SubjectID;
                        this.$router.push({ path: `/step3/${sid}` }) // -> /user/123
                    }
                    else 
                    {
                      this.$message.error('保存失败！'+res.body.Content);   
                    }
                },function(res){
                    debugger
                    alert("error:"+res.status);
                });
               
            },
            onAddRow:function(){
                this.form.addlist.unshift({
                            SubjectID: this.SubjectID,
                            FullName: '',
                            ShortName: '',
                            EnName: '',
                            Tag: "",
                            tags:[],
                            Remark: '',
                            Resume: '',
                            CreateTime:''
                        });
            },
            onDeleteRow:function(e,t){
                if(t==1)
                    this.form.addlist.splice(parseInt(e.currentTarget.getAttribute("index")),1);
                else 
                    this.form.editlist.splice(parseInt(e.currentTarget.getAttribute("index")),1);
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        },
        mounted:function () {
            let self = this;
            window.onresize = function () {
                self.clientHeight = document.documentElement.clientHeight - (this.isshowfooter?(200):(150));
                self.clientWidth = document.documentElement.clientWidth;
                $("#content_module").height(self.clientHeight);
                $(".pageleft").height(self.clientHeight-20);
                //获取宽度
                self.iscollapse = self.clientWidth < 768;
            };
            window.onresize();
        },
        created(){
            this.baseDate.SubjectTypelist = SubjectType;
            this.baseDate.Taglist = Tag;
            this.baseDate.curpage = page;
            this.fetchData();
        }   ,
        components:{
            vheader,vfooter
        }
    }
</script>
<style scoped>
    #content_module{  width: 100%;padding: 0;margin: 0 auto;  }
    .content_main{   padding: 0;margin: 0 auto; }
    .pageleft { margin-top:10px; overflow: hidden; overflow-y: auto;}
    .el-col {
        border-radius: 4px;
    }
</style>
